<template>
  <div class="mask-box">
    <div class="pass-box" :class="{slider:sliderIn}">
      <!-- 图文 -->
      <div v-if="config.type==1" class="img-box">
        <img model="aspectFill" :style="imgSize" :src="config.imgUrl" @load="imgLoaded" alt="">
      </div>
      <!-- 音文 -->
      <img v-if="config.type==2" class="default-img" src="/static/audioBox.png" alt="">
      <!-- 纯文字 -->
      <img v-if="config.type==3" class="default-img" src="/static/wordBox.png" alt="">

      <div class="title">{{config.title}}</div>
      <div class="desc">{{config.desc}}</div>
      <div class="btn-box">
        <!-- <div v-if="isTen" class="btn-center" @click="centerClickHandle">返回地图</div> -->
        <div  class="btn-center" @click="centerClickHandle">下一关</div>
      </div>
    </div>
    <!-- <div class="btn-left" @click="leftClickHandle":class="{leftIn:btnIn}"><img src="/static/unLike.png" alt="">无聊</div>
    <div class="btn-right" @click="rightClickHandle":class="{rightIn:btnIn}"><img src="/static/like.png" alt="">好玩</div> -->
  </div>
</template>

<script>
// 过关弹窗 三种类型 图文 图片需要传参，其他两个 默认
export default {
  props: ["config", "isTen"], //config:{type:1图文2音文3纯文字，title:"答案"，desc:"释义"，imgUrl:'图片地址'}
  data() {
    return {
      imgSize: "",
      sliderIn: false,
      btnIn:false,
    };
  },
  methods: {
    leftClickHandle() {
      this.sliderIn = false;
      this.btnIn =false;
      setTimeout(() => {
        this.$emit("leftClick");
      }, 200);
    },
    rightClickHandle() {
      this.sliderIn = false;
      this.btnIn =false;
      setTimeout(() => {
        this.$emit("rightClick");
      }, 200);
    },
    centerClickHandle() {
      this.sliderIn = false;
      this.btnIn =false;
      setTimeout(() => {
        this.$emit("center");
      }, 200);
    },
    imgLoaded(event) {
      let width = event.target.width,
        height = event.target.height;
      if (width > height) {
        width = 240 / height * width;
        height = 240;
      } else {
        height = 240 / width * height;
        width = 240;
      }
      this.imgSize = `width:${width}rpx;height:${height}rpx;`;
    }
  },
  mounted() {
    setTimeout(()=>{
      this.sliderIn = true;
    },100)
    setTimeout(()=>{
      this.btnIn =true
    },300)
  }
};
</script>

<style lang="scss" scoped>
.mask-box {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 10;
  background: rgba(#000, 0.4);
}
.pass-box {
  box-sizing: border-box;
  width: 590rpx;
  padding: 166rpx 38rpx 40rpx 38rpx;
  background: #000;
  position: absolute;
  background: #fff;
  border-radius: 8rpx;
  text-align: center;
  z-index: 15;
  left: 50%;
  // top: 200rpx;
  transform: translate(-50%, -800rpx);
  transition: all 0.2s linear;
}
.slider {
  transform: translate(-50%, 200rpx);
}
.default-img,
.img-box {
  width: 260rpx;
  height: 260rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -84rpx;
}
.img-box {
  width: 240rpx;
  height: 240rpx;
  top: -74rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 10rpx solid #fff;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.title {
  font-size: 48rpx;
  line-height: 1;
  padding: 42rpx 0;
  text-align: center;
  color: #e55f80;
}
.desc {
  font-size: 30rpx;
  line-height: 1.4em;
  color: #aaaaaa;
  margin-bottom: 42rpx;
}
.btn-box {
  display: flex;
  justify-content: center;
}
.btn-center {
  width: 230rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #e55f80;
  font-weight: bold;
  border: 4rpx solid #e55f80;
}
.btn-left,
.btn-right {
  position: absolute;
  top: 850rpx;
  width: 292rpx;
  height: 102rpx;
  font-size: 36rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6rpx solid #fff;
  background: #ff853c;
  color: #fff;
  img {
    width: 46rpx;
    height: 40rpx;
    margin-right: 16rpx;
  }
}

.btn-left {
  // left: -4rpx;
  left: -310rpx;
  transform: translate(0);
  background: #98c63f;
  border-top-right-radius: 2000rpx;
  border-bottom-right-radius: 2000rpx;
  transition: all .2s linear;
}
.btn-right {
  // right: -4rpx;
  right:-310rpx;
  transform: translate(0);
  border-top-left-radius: 2000rpx;
  border-bottom-left-radius: 2000rpx;
  transition: all .2s linear;
}
.leftIn{
  left: -4rpx;
}
.rightIn{
  right: -4rpx;
}
</style>
